import { HOOK_CATEGORY } from '@pancakeswap/infinity-sdk'
import { useTranslation } from '@pancakeswap/localization'
import { FlexGap, Text, useMatchBreakpoints, useTooltip } from '@pancakeswap/uikit'
import { useMemo } from 'react'
import styled from 'styled-components'

const HookTip = styled(FlexGap)`
  cursor: pointer;
  border-radius: 8px;

  &:hover {
    background-color: ${({ theme }) => theme.colors.tertiary};
  }
`

const BrevisIcon = () => {
  return (
    <svg
      width="17"
      height="17"
      viewBox="0 0 17 17"
      fill="none"
      xmlns="http://www.w3.org/2000/svg"
      xmlnsXlink="http://www.w3.org/1999/xlink"
    >
      <rect x="0.5" y="0.5" width="16" height="16" fill="url(#pattern0_4505_59569)" />
      <defs>
        <pattern id="pattern0_4505_59569" patternContentUnits="objectBoundingBox" width="1" height="1">
          <use xlinkHref="#image0_4505_59569" transform="scale(0.00625)" />
        </pattern>
        <image
          id="image0_4505_59569"
          width="160"
          height="160"
          preserveAspectRatio="none"
          xlinkHref=""
        />
      </defs>
    </svg>
  )
}

export const HookDiscountFeeDisplay: React.FC<{
  hookCategory?: HOOK_CATEGORY.BrevisDiscount | HOOK_CATEGORY.PrimusDiscount
  hookDiscount?: { originalFee: number; discountFee: number }
  feeDisplay: string
  originalFeeDisplay: string
  showIcon?: boolean
}> = ({ hookDiscount, hookCategory, feeDisplay, originalFeeDisplay, showIcon }) => {
  const { t } = useTranslation()
  const { isMobile } = useMatchBreakpoints()
  const noDiscount = hookDiscount?.discountFee === hookDiscount?.originalFee
  const noDiscountText = useMemo(() => {
    if (!hookCategory) return ''
    if (hookCategory === HOOK_CATEGORY.BrevisDiscount) {
      return t('You’re trading via Brevis Hook-enabled pool, check for discount eligibility on pool page.')
    }
    if (hookCategory === HOOK_CATEGORY.PrimusDiscount) {
      return t('You’re trading via Primus Hook-enabled pool, check for discount eligibility on pool page.')
    }
    return ''
  }, [hookCategory, t])
  const hasDiscountText = useMemo(() => {
    if (!hookCategory) return ''
    if (hookCategory === HOOK_CATEGORY.BrevisDiscount) {
      return t('You’ve qualified for a discount via a Brevis Hook-enabled pool!')
    }
    if (hookCategory === HOOK_CATEGORY.PrimusDiscount) {
      return t('You’ve qualified for a discount via a Primus Hook-enabled pool!')
    }
    return ''
  }, [hookCategory, t])
  const hookLabel = useMemo(() => {
    if (!hookCategory) return ''
    if (hookCategory === HOOK_CATEGORY.BrevisDiscount) {
      return 'Fee Discount (Brevis)'
    }
    if (hookCategory === HOOK_CATEGORY.PrimusDiscount) {
      return 'Fee Discount (Primus)'
    }
    return ''
  }, [hookCategory])

  const { targetRef, tooltip, tooltipVisible } = useTooltip(
    <Text>{noDiscount ? noDiscountText : hasDiscountText}</Text>,
  )

  return (
    <>
      {tooltipVisible && tooltip}
      {isMobile ? (
        <FlexGap gap="4px" ref={targetRef} style={{ textDecoration: 'underline dotted', cursor: 'pointer' }}>
          <Text color={!noDiscount ? 'positive60' : undefined} bold>
            ({feeDisplay}%)
          </Text>
          {!noDiscount ? <Text strikeThrough>({originalFeeDisplay}%)</Text> : null}
        </FlexGap>
      ) : (
        <>
          <FlexGap gap="4px" ref={targetRef}>
            <Text fontSize={14} color={!noDiscount ? 'positive60' : undefined} bold>
              ({feeDisplay}%)
            </Text>
            {!noDiscount ? (
              <Text fontSize={14} strikeThrough>
                ({originalFeeDisplay}%)
              </Text>
            ) : null}
          </FlexGap>
          <HookTip flexDirection="row" alignItems="center" gap="4px" ref={targetRef}>
            {showIcon && hookCategory === HOOK_CATEGORY.BrevisDiscount ? <BrevisIcon /> : null}
            <Text fontSize={12} lineHeight={1} color="secondaryText">
              {hookLabel}
            </Text>
          </HookTip>
        </>
      )}
    </>
  )
}
